// pages/events/events.js
import profile from '../../profile.js'

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    lang: app.globalData.language,
    index: profile.events,

    classNav: profile.events.eventsNav,
    navNum: 0,

    eventsList: profile.events.eventsList,

    // 上划swiper显示
    inkSwiperShow: true,
    // 活动介绍显示
    inkInfoShow: false,

    // 同意协议弹窗
    popAgreeShow: false,

    pickerIndex: 0,
    graduaDate: '',
    creatDate: '',

    // 投稿参赛第一步显示
    inkSignShow: false,
    // 投稿参赛第二步显示
    inkSignOne: true,

    // 上传个人图片
    inkPersonPicImg: [],

    // 上传作品列表
    inkProductList: [{
      id: 1,
      img: '../../images/upload_img_demo.jpg'
    },{
      id: 2,
      img: '../../images/upload_img_demo1.jpg'
    }],
    productNum: 0,

    // 活动是否进入征稿期
    isInkStart: true,
    // 活动结束阶段相关
    inkIsEnd: false,
    showInkInfo: true,

    // 参赛作品与大赛介绍tab
    bg: '../../images/tab_box_bg3_0.png',
    tabNum: 0,
    tabList: profile.events.tabList,

    // 参赛作品相关
    items: profile.events.InkProList,
    masonryHeight: 0,
    // 作品图片点击放大相关
    popShow: false,
    isShowImg: true,
    popImgSrc: ['../../images/ink_winner_demo_img.jpg','../../images/integral_shop_banner.jpg','../../images/content_demo_img.jpg'],
    // 判断显示获奖作品 or 参赛作品
    isWinner: false,

    inkProName: profile.events.inkProName,
    inkProName_en: profile.events.inkProName_en,
    inkProSize: profile.events.inkProSize,
    inkProSize_en: profile.events.inkProSize_en,
    inkProMaterial: profile.events.inkProMaterial,
    inkProMaterial_en: profile.events.inkProMaterial_en,
    inkProIntro: profile.events.inkProIntro,

    videoList: [{
        id: '0',
        src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
    },{
        id: '1',
        src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
    }],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,
  },

  videoSwiperChange: function (e) {
      console.log(e.detail.current);
      let list = this.data.videoList;
      for (let i=0;i<list.length;i++){
        wx.createVideoContext(list[i].id).stop();
      }
  },

  // 收起详情
  closeInkInfoTap: function (e) {
    this.setData({
      inkInfoShow: false,
      inkSwiperShow: true
    })
  },

  // 弹层事件
  popBtnTap: function (e) {
    this.setData({
      popShow: false
    })
  },

  // 单个作品like点击事件
  likeTap: function(e) {
    let id = e.detail.id, list = this.data.items;
    for (let i=0;i<list.length;i++){
        if (id == list[i].id) {
          if (list[i].like == true) {
            list[i].like = false;
            list[i].likeNum --;
            this._doUpdateItem(list[i],i);
          }else{
            list[i].like = true;
            list[i].likeNum ++;
            this._doUpdateItem(list[i],i);
          }
        }
    }
    this.setData({
      items: list
    })
    profile.exhibitionDetail.exhProList = list;
    
    //this._doRefreshMasonry(this.data.items);
    //this.masonryHeightFun(300);
  },

  // 图片放大
  imgEnlargeTap: function (e) {
    let list = this.data.items, id = e.detail, popImgSrc = this.data.popImgSrc;
    for (let i=0;i<list.length;i++) {
      if (id == list[i].id) {
        popImgSrc = list[i].image
      }
    }
    this.setData({
      popShow: true,
      //popImgSrc
    })
  },

  // tab 点击事件
  tabTap: function(e) {
    let id = e.detail.id, list = this.data.tabList, bg = '', tabNum = 0;
    for (let i=0;i<list.length;i++){
      if (id == list[i].id) {
        list[i].onthis = true;
        tabNum = list[i].id;
        bg = '../../images/tab_box_bg3_'+ list[i].id +'.png';
      }else{
        list[i].onthis = false;
      }
    }
    this.setData({
      tabList: list,
      bg: bg,
      tabNum: tabNum
    })
    if (id == 0){
      this._doRefreshMasonry(this.data.items);
      this.masonryHeightFun(300);
    }
  },

  // 获奖作品按钮
  inkWinProTap: function (e) {
    this.setData({
      isWinner: true,
      showInkInfo: false,
    })
  },

  // 大赛介绍按钮
  inkProTap: function (e) {
    let list = this.data.tabList, bg = '', tabNum = 1;
    list[0].onthis = false;
    list[1].onthis = true;
    bg = '../../images/tab_box_bg3_1.png';
    this.setData({
      isWinner: false,
      showInkInfo: false,
      tabNum,
      bg,
      tabList: list,
    })
  },

  // 上传提交按钮
  signSubmitTap: function (e) {
    this.setData({
      inkSignShow: false,
      inkSignOne: true
    })
  },

  // 上传上一步按钮
  signPrevTap: function (e) {
    this.setData({
      inkSignOne: true
    })
  },

  // 上传下一步按钮
  signGoNextTap: function (e) {
    this.setData({
      inkSignOne: false
    })
  },

  // 删除作品
  deleteUpTap: function (e) {
    let list = this.data.inkProductList, id = e.currentTarget.id;
    console.log(id);
    for (let i=0;i<list.length;i++) {
      if (id == list[i].id) {
        list.splice(i,1);
      }
    }
    this.setData({
      inkProductList: list
    })
  },

  // 删除个人图片
  deleteUpPerTap: function (e) {
    let list = this.data.inkPersonPicImg, id = e.currentTarget.id;
    console.log(id);
    for (let i=0;i<list.length;i++) {
      if (id == list[i].id) {
        list.splice(i,1);
      }
    }
    this.setData({
      inkPersonPicImg: list
    })
  },

  // 上传个人照片按钮
  bindUploadPerPicTap: function (e) {
    let id = Math.random(), that = this, list = this.data.inkPersonPicImg, object = {};
    if (list.length == 1) return;
    wx.chooseMedia({
      mediaType: 'image',
      sourceType: 'album',
      success(res) {
        //console.log(res.tempFiles[0].tempFilePath);
        object.id = id;
        object.img = res.tempFiles[0].tempFilePath;
        list.push(object)
        that.setData({
          inkPersonPicImg: list
        })
      }
    })
  },

  // 上传作品图片按钮
  bindUploadImgTap: function (e) {
    let id = Math.random(), that = this, list = this.data.inkProductList, object = {};
    if (list.length == 3) return;
    wx.chooseMedia({
      mediaType: 'image',
      sourceType: 'album',
      success(res) {
        //console.log(res.tempFiles[0].tempFilePath);
        object.id = id;
        object.img = res.tempFiles[0].tempFilePath;
        list.push(object)
        that.setData({
          inkProductList: list
        })
      }
    })
  },

  // picker change
  bindPickerChange: function (e) {
    this.setData({
      pickerIndex: e.detail.value
    })
  },

  bindPickerChangeDate: function (e) {
    this.setData({
      graduaDate: e.detail.value
    })
  },

  bindPickerChangeDate1: function (e) {
    this.setData({
      creatDate: e.detail.value
    })
  },

  // swiper change
  inkChangeTap: function (e) {
    console.log(e.detail.current);
    if (e.detail.current == 0) return;
    this.setData({
      inkInfoShow: true,
      inkSwiperShow: false
    })
  },

  // 弹窗同意按钮
  popAgreeTap: function (e) {
    this.setData({
      inkInfoShow: false,
      inkSignShow: true,
      popAgreeShow: false
    })
  },

  // 弹窗不同意按钮
  popDisagreeTap: function (e) {
    this.setData({
      popAgreeShow: false
    })
  },

  // 投稿参赛按钮点击事件
  inkUploadTap: function (e) {
    this.setData({
      popAgreeShow: true
    })
  },

  // 活动tab切换事件
  changeClassNav: function (e) {
    let id = e.detail.id, list = this.data.classNav;
    for (let i=0;i<list.length;i++){
      if (list[i].id == id) {
        list[i].onthis = true
      }else{
        list[i].onthis = false
      }
    }
    this.setData({
      classNav: list,
      navNum: id
    })
    profile.events.classNav = list;
  },

  // 语言切换事件
  menuTap: function (e) {
    this.setData({
      lang: e.detail.lang
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '艺术课'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Art Class'
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list = this.data.eventsList, nav = this.data.classNav, productList = this.data.inkProductList;
    let num = productList.length;
    if (list.length == 0){
      nav[0].onthis = false;
      nav[1].onthis = true;
      this.setData({
        navNum: 1,
        classNav: nav,
      })
    }
    this.setData({
      productNum: num
    })
    if (!this.data.showInkInfo){
      this._doRefreshMasonry(this.data.items);
      this.masonryHeightFun(300);
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      lang: app.globalData.language
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '艺术活动'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Art Events'
      })
    }
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 3,
        lang: app.globalData.language
      })
    }
  },

  _doUpdateItem(newItem,index) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.updateItem(newItem,index);
  },

  // 刷新瀑布流
  _doRefreshMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.start(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 增加瀑布流内容
  _doAppendMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry')
    // 获取接口数据后使用瀑布流组件append方法，当append完成后调用then，是否可触底价在的标志位可以在这里处理
    this.masonryListComponent.append(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 瀑布流容器高度获取与设置
  masonryHeightFun: function (time) {
    let height = this.data.masonryHeight;
    setTimeout(() => {
      let query = wx.createSelectorQuery();
      query.select('#masonry').boundingClientRect(rect=>{
        height = rect.height;
        console.log(rect.height);
        this.setData({
          masonryHeight: height
        })
      }).exec();
    }, time);
  },
})